<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="topbar::static">
<body>

<nav th:replace="topbar::topbar"></nav>

<div class="container-fluid">
    <div class="row">
        <div th:replace="topbar::sidebar(activeUri='vnfd.html')"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">5GC MANO</h1>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
                新增VNFD
            </button>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>vnfdId</th>
                        <th>vnfProvider</th>
                        <th>vnfProductName</th>
                        <th>vnfSoftwareVersion</th>
                        <th>vnfdVersion</th>
                        <th>vdu</th>
                        <th>virtualCpd</th>
                        <th>deploymentFlavour</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="vnfd:${vnfds}">
                        <td th:text="${vnfd.vnfdId}"></td>
                        <td th:text="${vnfd.vnfProvider}"></td>
                        <td th:text="${vnfd.vnfProductName}"></td>
                        <td th:text="${vnfd.vnfSoftwareVersion}"></td>
                        <td th:text="${vnfd.vnfdVersion}"></td>
                        <td th:text="${vnfd.vdu}"></td>
                        <td th:text="${vnfd.virtualCpd}"></td>
                        <td th:text="${vnfd.deploymentFlavour}"></td>
                        <td>
                            <button type="button" class="btn btn-danger" aria-label="Left Align"
                                    th:onclick="|deleteVnfd(${vnfd.vnfdId})|">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--模态框，用于新增VNFD-->
<div id="modal_block" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增VNFD</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <div class="table-responsive">
                        <thead>
                        <tr>
                            <th>vnfdId</th>
                            <th>vnfProvider</th>
                            <th>vnfProductName</th>
                            <th>vnfSoftwareVersion</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="text" class="form-control" id="vnfdId"></td>
                            <td>
                                <select class="selectpicker" id="vnfProvider">
                                    <option class="form-control">free5gc</option>
                                    <option class="form-control">oai</option>
                                </select>
                            </td>
                            <td><input type="text" class="form-control" id="vnfProductName"></td>
                            <td><input type="text" class="form-control" id="vnfSoftwareVersion" value="1.0.0"></td>
                        </tr>
                        </tbody>
                        <thead>
                        <tr>
                            <th>vnfdVersion</th>
                            <th>vdu</th>
                            <th>virtualCpd</th>
                            <th>deploymentFlavour</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="text" class="form-control" id="vnfdVersion" value="1.0"></td>
                            <td>
                                <select id="vdu" class="selectpicker" multiple>
                                    <option class="form-control" th:each="vdu:${vdus}" th:value="${vdu.vduId}"
                                            th:text="'名称：'+${vdu.name}+'，描述：'+${vdu.description}">
                                    </option>
                                </select>
                            </td>
                            <td>
                                <select id="virtualCpd" class="selectpicker" multiple>
                                    <option class="form-control" th:each="vcpd:${vcpds}" th:value="${vcpd.cpdId}"
                                            th:text="'名称：'+${vcpd.name}+'，第四层协议：'+${vcpd.protocol}+'，端口号：'+${vcpd.port}">
                                    </option>
                                </select>
                            </td>
                            <td>
                                <select id="deploymentFlavour" class="selectpicker" multiple>
                                    <option class="form-control" th:each="vnfdf:${vnfdfs}" th:value="${vnfdf.flavourId}"
                                            th:text="'描述：'+${vnfdf.description}">
                                    </option>
                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </div>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createVnfd()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var baseUrl = "http://"+hostIp+":8004/vnfd/";

    function createVnfd() {
        var url = baseUrl + "create";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "vnfdId": $("#vnfdId").val(),
                "vnfProvider": $("#vnfProvider").val(),
                "vnfProductName": $("#vnfProductName").val(),
                "vnfSoftwareVersion": $("#vnfSoftwareVersion").val(),
                "vnfdVersion": $("#vnfdVersion").val(),
                "vdu": $("#vdu").val().join(","),
                "virtualCpd": $("#virtualCpd").val().join(","),
                "deploymentFlavour": $("#deploymentFlavour").val().join(",")
            },
            complete: function (vnfdId) {
                alert("vnfd创建成功");
                reload();
            }
        });
    }

    function deleteVnfd(vnfdId) {
        //异步删除nsd
        var url = baseUrl + "delete";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "vnfdId": vnfdId
            },
            complete: function (vnfdId) {
                alert("nsd删除成功");
                reload();
            }
        });
    }

    function reload() {
        $("#modal_block").modal('hide');
        window.location.reload();
    }
</script>
</html>
